<template>
  <div class="app-container">
    <el-dialog :title="this.title" :visible="modifyMemberVisible" @close="modifyMemberClose" width="600px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>
          <el-button type="primary" icon="el-icon-plus" @click="addMemberOpen">添加成员</el-button>
          <el-table border v-loading="modifyMemberLoading" :data="projectMemberList" style="margin-top:10px">
            <el-table-column label="岗位" align="center" prop="typeName" />
            <el-table-column label="姓名" align="center" prop="projectManagerName" />
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  v-show="scope.row.type!='pjm'"  icon="el-icon-edit-outline" @click="handleReplace(scope.row)">替换</el-button>
                </template>
            </el-table-column>
          </el-table>
        
    </el-dialog>

    <el-dialog title="添加成员" :visible="addMemberVisible" @close="addMemberClose" width="400px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>

          <el-form :model="addMemberForm"  label-width="80px">
            <el-form-item label="岗位">
              <el-select v-model="addMemberForm.type" filterable clearable  style="width: 100%;"  >
                <el-option v-for="dict in dict.type.owner_position" :key="dict.value" :disabled="dict.value == 'pjm'" :label="dict.label" :value="dict.value" />
              </el-select>
              
            </el-form-item>
            <el-form-item label="人员">
              <el-select v-model="addMemberForm.userId" filterable clearable  style="width: 100%;" >
                <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
              </el-select>
            </el-form-item>
            
          </el-form>
          <span slot="footer" class="dialog-footer" > 
            <el-button type="primary"  @click="onSubmit">提交</el-button>
          </span>
    </el-dialog>

    <el-dialog title="替换成员" :visible="replaceMemberVisible" @close="replaceMemberClose" width="400px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>

          <el-form :model="replaceMemberForm"  label-width="80px">
            <el-form-item label="岗位">
                {{ replaceMemberForm.typeName }}              
            </el-form-item>
            <el-form-item label="现成员">
              {{ replaceMemberForm.projectManagerName }}  
            </el-form-item>
            <el-form-item label="新成员">
              <el-select v-model="replaceMemberForm.newUserId" filterable clearable  style="width: 100%;" >
                <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer" > 
            <el-button type="primary" v-hasPermi="['projectManage:list:update']"  @click="onSubmitReplace">提交</el-button>
          </span>
    </el-dialog>
     
    
  </div>
</template>

<script>
 import {addProjectMember,getDetail,replaceProjectMember}  from "@/api/projectManage/projectList";
  
  export default {
  name: "ModifyMember",
  dicts: ['owner_position'],
  data() {
      return { 
        modifyMemberVisible:false,
        modifyMemberLoading:false,
        userList:[], 
        //项目成员
        projectMemberList:[],
        title:'编辑成员',
        //项目ID
        projectListId:null,
        //添加成员
        addMemberVisible:false,
        addMemberForm:{},

        replaceMemberVisible:false, 
        replaceMemberForm:{},
        //当前行
        currRow:{}
 
      }
  },
  created() {
     
  },

  methods: {
 
    //打开弹窗
    open(projectMemberList,projectListId,userList){
       this.modifyMemberVisible = true;
       this.projectMemberList = projectMemberList;
       this.projectListId = projectListId;
       this.userList = userList;
    },

    //关闭弹窗
    modifyMemberClose(){
      this.modifyMemberVisible = false;
      this.projectMemberList = [];
      this.projectListId=null;
      this.$emit('closeback');    
    },

    //关闭添加成员框
    addMemberClose(){
        this.addMemberVisible = false;
        this.addMemberForm = {};
    },

    //添加成员
    addMemberOpen(){
      this.addMemberVisible = true;
    },

    //添加成员提交
    onSubmit(){
      this.$modal.loading("请稍候...");
      this.addMemberForm.projectListId = this.projectListId;
      addProjectMember(this.addMemberForm).then(response=>{
          this.addMemberClose();
          this.$modal.closeLoading();
          this.getProjectDetail();
      }).catch(() => {
          this.$modal.closeLoading();
      });
    },

    //查询项目详情
    getProjectDetail(){
      getDetail(this.projectListId).then(response =>{ 
          this.projectMemberList = response.data.projectListMemberList;
      })
    },
  
    //关闭替换成员弹框
    replaceMemberClose(){
      this.replaceMemberVisible = false;
      this.replaceMemberForm = {};
    },


    //打开替换弹窗
    handleReplace(row){
        this.replaceMemberForm = row,
        this.replaceMemberForm.projectListId = this.projectListId;
        this.replaceMemberVisible = true;
    },


    //提交替换成员
    onSubmitReplace(){ 
      this.$modal.loading("请稍候...");
      this.replaceMemberForm.projectListId = this.projectListId;
      replaceProjectMember(this.replaceMemberForm).then(response=>{
          this.replaceMemberClose();
          this.$modal.closeLoading();
          this.getProjectDetail();
      }).catch(() => {
          this.$modal.closeLoading();
      });
    },


 
  }
};
</script>
<style>
  .el-dialog__body{
    padding: 0px 20px !important;
  } 

</style>
 
 
